<template>
  <div>
    <sky-panel title="Vue3.0表格组件">
      <template #main>
        <sky-table
          ref="table"
          nested-tables
          :chopper="3"
          :data="data"
          @get-current="getCurrent"
          @befor-expend="beforExpend"
        >
          <template #default="row">
            <sky-column :row="row.scope" expend prop="name" label="姓名" />
            <sky-column :row="row.scope" prop="age" label="年龄" />
            <sky-column :row="row.scope" prop="home" label="家庭住址" />
          </template>
          <template #expend="row">
            <sky-table ref="innertable" v-slot="downrow" :data="row.scope.heeler">
              <sky-column :row="downrow.scope" prop="name" label="姓名" />
              <sky-column :row="downrow.scope" prop="age" label="年龄" />
              <sky-column :row="downrow.scope" prop="home" label="家庭住址" />
            </sky-table>
          </template>
        </sky-table>
      </template>
    </sky-panel>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getExpendData } from '_@/api/example/index'

export default defineComponent({
  setup() {
    const beforExpend = async(row:any, cb: any) => {
      const { data: { list }} = await getExpendData({ id: row.id })
      row.heeler = list
      cb()
    }

    const getCurrent = (row: any) => {
      // console.log(row)
    }

    return {
      beforExpend,
      getCurrent
    }
  },
  data() {
    return {
      data: [
        {
          id: '1',
          name: '王重阳',
          age: 300,
          home: '武当山',
          heeler: []
        },
        {
          id: '2',
          name: '黄药师',
          age: 38,
          home: '桃花岛',
          heeler: []
        },
        {
          id: '3',
          name: '欧阳锋',
          age: 38,
          home: '西域',
          heeler: []
        },
        {
          id: '4',
          name: '洪七公',
          age: 59,
          home: '未知',
          heeler: []
        }

      ]
    }
  }
})
</script>
